<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="/js/echarts.js"></script>
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <%--引入element的js--%>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="/js/axios.min.js"></script>
    <%--引入elementui的样式--%>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

<style>
   /* element.style {
        position: absolute;
        left: -29px;
        top: -20px;
        width: 600px;
        height: 400px;
        user-select: none;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        padding: 0px;
        margin: 0px;
        border-width: 0px;
    }*/
    #app {
        position: absolute;
        left: 0px;
        top: 59px;
        width: 600px;
        height: 400px;
        user-select: none;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        padding: 0px;
        margin: 0px;
        border-width: 0px;
    }
    #tu {
        position: absolute;
        left: 657px;
        top: 53px;
        width: 600px;
        height: 400px;
        user-select: none;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        padding: 0px;
        margin: 0px;
        border-width: 0px;
    }
</style>
</head>

<body>
<div >
    <legend class="legend">数据统计</legend>
    <el-row>
        <el-col :span="8">
<div id="app"  style="width: 600px;height:400px;"></div>
<div id="tu" style="width: 600px;height:400px;margin-left:100px " ></div>
        </el-col>
    </el-row>
</div>
<div id="tu2" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    let  app=new Vue({
        el: "#app",
        data: {
        },
        created() {
            this.giao();

        },

            methods: ({
            giao() {
                axios.get("/echarts/select").then(result => {

                    var myChart = echarts.init(document.getElementById('app'));
                    myChart.setOption({
                        title: {
                            text: '图书类型',
                            subtext: 'Fake Data',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left'
                        },
                        series: [
                            {
                                name: 'Access From',
                                type: 'pie',
                                radius: '50%',
                                data: result.data,
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    })
                })
            },

        }),
    })
    let tu=new Vue({
        el:"#tu",
        data:{
        },
        created() {
            this.tu();

        },
        methods:{
            tu() {
                axios.get("/echarts/selectstaff").then(result => {
                    console.log(result)
                    var myChart = echarts.init(document.getElementById('tu'));
                    myChart.setOption({
                        title: {
                            text: '人员',
                            subtext: 'Fake Data',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left'
                        },
                        series: [
                            {
                                name: 'Access From',
                                type: 'pie',
                                radius: '50%',
                                data: result.data,
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    })
                })
            }
        }
    })
   /* let  tu2=new Vue({
        el:"tu2",
        data:{
            shu:[],
            name2:[],

        },
        methods:{
            axios.get("/").then(result=>{
                console.log(result)
                for (let i = 0; i < result.data.length; i++) {
                    // push 追加，最后一位追加
                    this.name2.push(result.data[i].name)
                    this.shu.push(result.data[i].value)
                }
                var myChart = echarts.init(document.getElementById('tu2'));

                myChart.setOption({
                    title: {
                        text: '借阅数量'
                    },
                    tooltip: {},
                    legend: {
                        data: ["数量"]
                    },
                    xAxis: {
                        data:this.name2
                    },
                    yAxis: {},
                    series: [
                        {
                            name: '数',
                            type: 'bar',
                            data:this.shu
                        }
                    ]
                })
            })

        }
    })
*/
</script>

</body>
</html>
